<template>
    <div class="time_messagePage flex_column">
        <div class="selectVue flex_between">
            <div class="flex align_center">
                <el-select v-model="weChatId" placeholder="选择微信AI客服" @change="handleChange" :clearable="true">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        <span style="color: #000;">{{ item.name }}</span>
                    </el-option>
                </el-select>  
            </div>
            <div class="btn" @click="toCreate()">创建</div>
        </div>

        <!-- 定时消息列表 -->
        <div class="time_messageContent flex_1">
            <el-table :data="list" height="100%" border width="100%" class="center-table">
                <!-- 列表为空 -->
                <div slot="empty" class="flex_column align_center">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                    <div style="color: #8F959E; padding-top: 15px">点击右上角的创建，添加您的定时消息吧</div>
                </div>

                <!-- 发送对象 -->
                <el-table-column prop="receiverIds" label="发送对象" width="100" >
                    <template slot-scope="scope">
                        <span style="font-size: 13px; color: #333;">{{ scope.row.receiverIds.split(",").length }}人</span>
                    </template>
                </el-table-column>

                <!-- 发送类型 -->
                <el-table-column prop="repeatTypeStr" label="发送类型" width="100"></el-table-column>

                <!-- 发送时间 -->
                <el-table-column prop="triggerTime" label="发送时间" width="150"></el-table-column>

                <!-- 消息内容 -->
                <el-table-column prop="msgContent" label="消息内容" :show-overflow-tooltip="true"></el-table-column>

                <!-- 状态 -->
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">
                        <div class="state" :class="{active: scope.row.status}" @click="handleAiStatus(scope.row)">
                            <div class="dot dot_right" v-if="scope.row.status===1"></div>
                            <div class="dot dot_left" v-else></div>
                        </div>
                    </template>
                </el-table-column>

                <!--  查看 删除 -->
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            <!-- <el-button size="mini" type="manage" @click="handleManage(scope.row)">管理</el-button> -->
                            <el-button size="mini" type="delete" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="prev, pager, next" :total="total"></el-pagination>
        </div>

        <!-- 创建定时消息 -->
        <el-dialog :visible.sync="dialogTableVisible" :show-close="false" :center="true" top="4.5vh" @close="close">
            <div class="dialogVue flex_column">
                <!-- 顶部步骤 -->
                <div class="stepVue flex_center">
                    <div class="flex_column align_center">
                        <div class="dot" :class="{active: current===1}">1</div>
                        <span :class="{textActive: current===1}">选择接收消息对象</span>
                    </div>
                    <div class="line"></div>
                    <div class="flex_column align_center">
                        <div class="dot" :class="{active: current===2}">2</div>
                        <span :class="{textActive: current===2}">设置消息内容</span>
                    </div>
                    <div class="line"></div>
                    <div class="flex_column align_center">
                        <div class="dot" :class="{active: current===3}">3</div>
                        <span :class="{textActive: current===3}">完成</span>
                    </div>
                </div>   

                <!-- 第一步 -->
                <template v-if="current===1">
                    <!-- 搜索 -->
                    <div class="searchVue flex align_center margin20">
                        <el-select v-model="weChatId" placeholder="选择微信AI客服" @change="handleChange">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                <span style="color: #000;">{{ item.name }}</span>
                            </el-option>
                        </el-select>  
                        <el-input v-model="key" placeholder="请输入你要找的微信" :clearable="true" style="width: 300px; margin-left: 20px;" @clear="clearFun"></el-input>
                        <div class="btn" @click="searchFun">搜索</div>
                    </div>

                    <!-- 选择对象 -->
                    <div class="content flex_1">
                        <el-table :data="friendList" height="100%" border width="100%" class="center-table" :row-key="getRowKeys" @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                :reserve-selection="true"
                                width="55">
                            </el-table-column>
                            <!-- 名称/备注 -->
                            <el-table-column
                                prop="friendWechatName"
                                label="名称/备注"
                                width="150"
                            ></el-table-column>

                            <!-- 标签 -->
                            <el-table-column 
                                prop="tag" 
                                label="标签"
                                :show-overflow-tooltip="true"
                            ></el-table-column>

                            <!-- AI总结 -->
                            <el-table-column 
                                prop="total" 
                                align="center" 
                                label="AI总结" 
                            ></el-table-column>

                            <!-- 对话条数 -->
                            <el-table-column 
                                prop="record" 
                                label="对话条数"
                                width="150"
                            ></el-table-column>

                            <!-- 最后聊天时间 -->
                            <el-table-column prop="lastSendTime" label="最后聊天时间" :show-overflow-tooltip="true" width="150"></el-table-column>

                            <!-- 备注 -->
                            <el-table-column prop="friendWechatRemark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                        </el-table>
                    </div>

                    <div class="selectedVue">
                        <el-tag v-for="tag in receiverList" :key="tag.name" type="info" size="mini">{{tag.friendWechatName}}</el-tag>
                    </div>

                    <!-- 分页 -->
                    <div class="paginationVue flex_between align_center">
                        <el-pagination background layout="prev, pager, next" :total="friendTotal" @current-change="handleCurrentChange" v-if="isPagination"></el-pagination>
                        <span v-else></span>
                        <div class="flex align_center">
                            <div class="cancel" @click="close">取消</div>
                            <div class="create" @click="nextFun(1)">下一步</div>
                        </div>
                    </div>
                </template>

                <!-- 第二步 -->
                <template v-if="current===2">
                    <div class="label">已选对象</div>
                    <div class="selectedVue" style="margin-top: 0;">
                        <el-tag v-for="tag in receiverList" :key="tag.name" closable type="info" size="mini" @close="handleClose(tag)">{{tag.friendWechatName}}</el-tag>
                    </div>

                    <div class="label">发布日期</div>
                    <div class="radioVue">
                        <div class="flex">
                            <el-radio v-model="radio" :label="item.key" v-for="(item, index) in repeatTypeList" :key="index" @close="handleClose(tag)">{{ item.name }}</el-radio>
                        </div>

                        <div class="flex align_center" style="padding-top: 15px;" v-if="radio==1">
                            <div class="h8">选择发布日期</div>
                            <!-- 特定日期 -->
                            <div class="block">
                                <el-date-picker
                                    v-model="date"
                                    type="date"
                                    @change="handleDate"
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <div style="width: 50px;"></div>
                            <div class="h8">选择发布时间</div>
                            <!-- 特定时间 -->
                            <div class="block">
                                <el-time-select
                                    v-model="time"
                                    :picker-options="{ start: '09:00', step: '00:10', end: '22:00' }"
                                    placeholder="选择时间">
                                </el-time-select>
                            </div>
                        </div>

                        <div class="flex align_center" style="padding-top: 15px;" v-if="radio==2">
                            <div class="h8">选择发布时间</div>
                            <!-- 特定时间 -->
                            <div class="block">
                                <el-time-select
                                    v-model="time"
                                    :picker-options="{ start: '09:00', step: '00:10', end: '22:00' }"
                                    placeholder="选择时间">
                                </el-time-select>
                            </div>
                        </div>
                        
                        <div style="padding-top: 15px;" v-if="radio==3">
                            <div class="flex align_center">
                                <div class="h8">选择发布日期</div>
                                <div class="week" :class="{active: selectDays.includes(o)}" v-for="(o, i) in days" :key="i" @click="selectFun(o)">{{ o }}</div>
                            </div>
                            <el-time-select
                                style="margin-top: 15px;"
                                v-model="time"
                                :picker-options="{ start: '09:00', step: '00:10', end: '22:00' }"
                                placeholder="选择时间">
                            </el-time-select>
                        </div>  
                    </div>

                    <div class="label">发布内容</div>
                    <div class="radioVue">
                        <div class="flex">
                            <el-radio v-model="radio20" label="1">自定义文本内容</el-radio>
                            <el-radio v-model="radio20" label="2">自定义图片内容</el-radio>
                            <el-radio v-model="radio20" label="3">节假日祝福</el-radio>
                        </div>

                        <!-- 文本 -->
                        <template v-if="radio20=='1'">
                            <div class="flex align_center" style="margin-top: 20px;">
                                <span style=" color: #666; font-size: 12px; padding-right: 10px;">使用AI生成内容</span>
                                <el-switch v-model="isAi" active-color="#0147fd" inactive-color="#999"></el-switch>
                            </div>
                            <div class="flex_between align_center">
                                <textarea placeholder="请输入您要群发的内容" v-if="!isAi" v-model="message"></textarea>
                                <textarea placeholder="请大概描述你需要AI生成的内容需求" v-else v-model="ai_request"></textarea>
                                <div class="arrow relative" v-if="isAi">
                                    <img src="../../assets/arrow.png" title="点击AI生成" style="width: 80px; height: 60px">
                                    <div class="absolute_auto text_center" style="color: #fff; font-size: 12px; width: 100%; font-weight: 600; line-height: 1;">点击生成</div>
                                </div>
                                <textarea placeholder="AI生成内容预览" v-if="isAi" v-model="aiMessage"></textarea>
                            </div>
                        </template>

                        <!-- 图片 -->
                        <template v-if="radio20=='2'">
                            <div class="lii relative">
                                <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept="image/*" @change="fileChange($event)"/>
                                <img :src="img" style="width: 100%; height: 100%;" class="absolute_auto" v-if="img">
                                <img src="../../assets/upload.png" style="width: 38px; height: 38px;" class="absolute_auto" v-else>
                            </div>
                        </template>

                        <!-- 祝福语 -->
                        <template v-if="radio20=='3'">
                            <el-tabs v-model="activeName" type="card" style="margin-top: 20px;">
                                <el-tab-pane label="自定义文本内容" name="1">
                                    <textarea placeholder="请输入您的祝福内容" style="width: 100%;"></textarea>
                                </el-tab-pane>
                                <el-tab-pane label="AI生成文本内容" name="2">
                                    <div class="flex_between align_center">
                                        <textarea :placeholder="isAi?'请大概描述你需要 AI 生成的内容需求':'请输入您要群发的内容'"></textarea>
                                        <div class="arrow relative">
                                            <img src="../../assets/arrow.png" title="点击AI生成" style="width: 80px; height: 60px">
                                            <div class="absolute_auto text_center" style="color: #fff; font-size: 12px; width: 100%; font-weight: 600; line-height: 1;">点击生成</div>
                                        </div>
                                        <textarea placeholder="AI生成内容预览"></textarea>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="定制图片内容" name="3">
                                    <div class="lii relative">
                                        <img src="../../assets/upload.png" style="width: 38px; height: 38px;" class="absolute_auto">
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </div>

                    <div class="flex_1"></div>

                    <div class="paginationVue flex_end align_center margin30">   
                        <div class="cancel" @click="close">取消</div>
                        <div class="create" @click="nextFun(2)">下一步</div>
                    </div>
                </template>

                <template v-if="current===3">
                    <div class="label">已选对象</div>
                    <div class="selectedVue" style="margin-top: 0;">
                        <el-tag v-for="tag in receiverList" :key="tag.name" closable type="info" size="mini" @close="handleTag(tag)">{{tag.friendWechatName}}</el-tag>
                    </div>
                    <div class="inner flex_1">
                        <div class="innerLi" v-if="radio==1">发布时间： {{ date }} {{ time }}</div>
                        <div class="innerLi" v-if="radio==2">发布时间： 每天 {{ time }}</div>
                        <div class="innerLi flex align_center" v-if="radio==3">
                            <span>发布时间：</span> 
                            <div class="week" v-for="(o, i) in selectDays" :key="i">{{ o }}</div>
                            <span>每天 {{ time }}</span>
                        </div>
                        <div class="innerConten">群发内容： {{ isAi ? aiMessage : message }}</div>
                    </div>
                    <div class="paginationVue flex_end align_center margin10">   
                        <div class="cancel" @click="current=2">上一步</div>
                        <div class="create" @click="submitFun()">完成</div>
                    </div>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { toast, formatTime } from '@/common/tools'
import { post } from '@/common/request'
export default {
    data(){
        return {
            list: [],
            total: 0,
            dialogTableVisible: false,
            current: 1,
            value: "",
            key: "",
            diaTotal: 0,
            radio: 1,
            radio20: "1",
            date: "",
            time: "",
            isAi: false,
            activeName: "1",
            options: [],
            pageNum: 1,
            pageSize: 10,
            friendList: [],
            days: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            selectDays: [],
            receiverIds: "", 
            repeatTypeList: [],
            message: "",
            aiMessage: "",
            ai_request: "",
            weChatId: "",
            receiverList: [], //接收消息对象
            imgFile: null,
            img: "",
            friendPageNum: 1,
            friendPageSize: 10,
            friendTotal: 0,
            isPagination: true,
            getRowKeys(row) {
                return row.id
            } 
        }
    },
    created(){
        this.getWeChatList()
        this.getRepeatTypeList()
    },

    watch: {
        key(){
            if(!this.key) this.getFriendList()
        }
    },
    methods: {
        // 管理定时消息
        handleManage(item){
            console.log(item)
            this.dialogTableVisible = true
            this.getFriendList()
            this.radio = item.repeatType
            this.radio20 = String(item.msgType)
            this.message = item.msgContent
            this.isAi = false
            if(item.repeatType===1) {
                this.date = item.triggerTime.split(" ")[0]
                this.time = item.triggerTime.split(" ")[1]
            }
            if(item.repeatType===2) {
                this.time = item.triggerTime
            }
            if(item.repeatType===3) {
                this.selectDays = item.dayStr.split(",")
                this.time = item.triggerTime
                console.log(this.selectDays, this.time)
            }
            
        },

        handleDate(e){
            let timestamp = new Date(e).getTime()
            this.date = formatTime(timestamp, "YMD")
        },

        nextFun(index){
            if(index===1) {
                if(this.receiverList.length===0) return toast(1, "请至少选择一个接收消息对象")
                this.current = 2
            }
            if(index===2) {
                console.log(this.radio, this.date)
                if(this.radio==1 && !this.date) return toast(1, "请选择日期")
                if(this.radio==1 && !this.time) return toast(1, "请选择时间")
                if(this.radio==2 && !this.time) return toast(1, "请选择时间")
                if(this.radio==3 && !this.time) return toast(1, "请选择时间")
                if(this.radio==3 && !this.selectDays.length===0) return toast(1, "请选择周期")
                if(this.isAi && !this.aiMessage) return toast(1, "请输入您的内容需求点击生成按钮生成群发内容")
                if(!this.isAi && !this.message) return toast(1, "请输入群发内容")
                this.current = 3
            }
        },

        toCreate(){
            if(this.options.length===0)  return toast(1, "请先创建并绑定微信")
            this.dialogTableVisible = true
            this.getFriendList()
        },

        close(){
            this.dialogTableVisible = false
            this.date = ""
            this.time = ""
            this.receiverList = []
            this.message = ""
            this.aiMessage = ""
            this.ai_request = ""
            this.current = 1
            this.img = ""
            this.imgFile = null
            this.radio = 1
            this.radio20 = "1"
            this.friendList = []
            this.selectDays = []
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        // 定时消息重复类型
        getRepeatTypeList(){
            this.$post("/front/timedMessage/repeatTypeList").then(res=>{
                console.log(res)
                this.repeatTypeList = res.data.obj
            })
        },

        // 获取定时消息列表
        getList(){
            this.$post("/front/timedMessage/timedMessageList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                weChatId: this.weChatId
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },

        // 定时状态消息开关
        handleAiStatus(item){
            this.$alert(`确认${item.status===1?"关闭":"开启"}的定时消息?`,  `${item.status===1?"关闭":"开启"}定时消息`, {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    if(action==="confirm") {
                        //AI自动回复开关代码
                        let url = item.status === 1 ? "/front/timedMessage/disableTimedMessage" : "/front/timedMessage/enableTimedMessage"
                        this.$post(url, {
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, item.status===0?"定时消息已开启":"定时消息已关闭")
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },


        handleChange(e){
            console.log(e)
            this.weChatId = e
        },

        // 查询微信列表
        getWeChatList(){
            this.$post("/front/userWechat/wechatList").then(res=>{
                if(res.data.code===0) {
                    this.options = res.data.obj.list
                    if(this.options.length===0) return
                    this.weChatId = this.options[0].id
                    this.getList()
                    console.log(this.options)
                }
            })
        },

        // 获取好友列表
        getFriendList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.friendPageNum,
                pageSize: this.friendPageSize,
                userWechatPrimaryId: this.weChatId
            }).then(res=>{
                if(res.data.code===0) {
                    this.isPagination = true
                    this.friendList = res.data.obj.list
                    this.friendTotal = res.data.obj.total
                }
            })
        },

        clearFun(){
            this.friendPageNum = 1
            this.getFriendList()
        },

         // 搜索好友
        searchFun(){
            this.$post("/front/wechat/friend/searchFriendList", {
                userWechatPrimaryId: this.weChatId,
                content: this.key
            }).then(res=>{
                this.friendList = res.data.obj
                this.isPagination = false
            })
        },

        // 好友分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.friendPageNum = val
            this.getFriendList()
        },

        selectFun(o){
            this.selectDays.push(o)
        },

        // 选择发送对象
        handleSelectionChange(val){
            console.log(val)
            this.receiverList = val
        },

        fileChange(event){
            const file = event.target.files[0];
            this.imgFile = file
            this.img = this.getFileUrl(file)
           
        },

        // 创建定时消息
        submitFun(){
            let array = []
            let receiverIds = ""
            for(let i=0; i<this.receiverList.length; i++){
                array.push(this.receiverList[i].id)
            }
            receiverIds = array.join(",")
            console.log(receiverIds)
            post("/front/timedMessage/addTimedMessage", {
                receiverIds,   //接收者ID
                wechatId: this.weChatId,
                msgType: this.radio20,   //消息类型
                msgContent: this.isAi ? this.aiMessage : this.message, // 消息内容
                repeatType: this.radio, //重复类型
                dayStr: this.radio==3 ? this.selectDays.join(",") : "",   // 周循环
                triggerTime: ["", this.date+ " " + this.time, this.time, this.time][this.radio],    //触发时间
                status: 1
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "创建成功")
                    this.close()
                    this.getList()
                }else{
                    toast(1, res.data.msg)
                } 
            })
        },

        // 删除定时消息
        handleDelete(item){
            console.log(item)
            this.$alert(`确认删除该定时消息?`, '删除定时消息', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        //删除微信代码
                        this.$post("/front/timedMessage/delTimedMessage", {
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        getFileUrl(file) {
            var url;
            var agent = navigator.userAgent;
            if (agent.indexOf("MSIE") >= 1 || agent.indexOf("NET")!=-1) {
                url = window.URL.createObjectURL(file);
            } else if (agent.indexOf("Firefox") > 0) {
                url = window.URL.createObjectURL(file);
            } else if (agent.indexOf("Chrome") > 0) {
                url =window.webkitURL.createObjectURL(file);
            }
            return url;
        },

        handleClose(tag) {
            this.receiverList.splice(this.receiverList.indexOf(tag), 1);
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.center-table td), 
:deep(.center-table th) {
    text-align: center !important;
}
:deep(.center-table th) {
    background: #f5f5f5 !important;
}
:deep(.el-table .cell) {
    font-size: 13px !important;
}
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--manage) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
:deep(.el-dialog) {
    width: 70vw;
    height: 90vh;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 0;
}
:deep(.el-dialog__body) {
    padding: 0;
}
:deep(.el-tabs__item.is-active) {
    color: #0147fd;
    font-weight: 600;
}
:deep(.el-tabs__item:hover) {
        color: #0147fd !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background: #0147fd !important;
    border-color: #0147fd !important;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background: #0147fd !important;
    border-color: #0147fd !important;
}
:deep(.el-tag--info) {
    margin-right: 5px;
    margin-bottom: 5px;
}
.time_messagePage {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
    .state {
        width: 40px;
        height: 20px;
        background: #AAA;
        border-radius: 10px;
        margin: 0 auto;
        position: relative;
        cursor: pointer;
        .dot {
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
        }
        .dot_left {
            left: 2px;
            top: 2px;
        }
        .dot_right {
            right: 2px;
            top: 2px;
        }
    }
    .active {
        background: #0147fd;
    }
    .selectVue {
        width: 100%;
        height: 36px;
        .btn {
            width: 80px;
            height: 40px;
            background: #0147fd;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }
    }
    .time_messageContent {
        width: 100%;
        margin-top: 20px;
    }
    .paginationVue {
        width: 100%;
        height: 60px;
    }
}

.dialogVue {
    width: 100%;
    height: 90vh;
    padding: 20px 20px 0;
    .stepVue {
        width: 100%;
        .dot {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #EEE;
            line-height: 25px;
            text-align: center;
            color: #999;
            margin-bottom: 10px;
        }
        .active {
            background: #0147fd;
            color: #fff;
        }
        .line {
            width: 150px;
            height: 1px;
            background: #EEE;
            margin-top: 12px;
        }
        span {
            color: #999;
            font-size: 12px;
        }
        .textActive {
            color: #0147fd;
            font-weight: 600; 
        }
    }

    .label {
        color: #666;
        font-size: 12px;
        padding: 20px 0 10px 0;
    }

    .radioVue {
        width: 100%;
        padding: 15px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        .h8 {
            color: #666;
            font-size: 12px;
            padding-right: 10px;
        }
        .arrow {
            width: 80px;
            height: 60px;
            margin: 0 20px;
            cursor: pointer;
        }
        .lii {
            width: 100px;
            height: 100px;
            background: #f5f5f5;
            border-radius: 4px;
            margin-top: 20px;
            cursor: pointer;
            .fileBtn {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                cursor: pointer;
                z-index: 98;
                border: none;
                outline: none;
            }
        }
    }

    .week {
        width: 80px;
        height: 32px;
        border: #DCDFE6 1px solid;
        margin-right: 10px;
        border-radius: 4px;
        line-height: 30px;
        text-align: center;
        color: #999;
        cursor: pointer;
    }

    .active {
        background: #0147fd;
        color: #fff;
    }
    
    textarea {
        flex: 1;
        height: 80px;
        border: #DCDFE6 1px solid;
        display: block;
        box-sizing: border-box;
        resize: none;
        border-radius: 4px;
        margin-top: 20px;
        font-family: PingFangSC, PingFang SC;
        padding: 10px;
        font-size: 13px;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: #AAA;
        font-size: 13px;
        font-family: PingFangSC, PingFang SC;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #AAA;
        font-size: 13px;
        font-family: PingFangSC, PingFang SC;
     }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #AAA;
        font-size: 13px;
        font-family: PingFangSC, PingFang SC;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #AAA;
        font-size: 13px;
        font-family: PingFangSC, PingFang SC;
    }

    .inner {
        width: 100%;
        border: 1px solid #DCDFE6;
        margin-top: 20px;
        border-radius: 4px;
        padding: 20px;
        .innerConten {
            padding-top: 20px;
            line-height: 1.4;
        }
    }

    .searchVue {
        width: 100%;
        height: 40px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    .content {
        width: 100%;
        margin-top: 20px;
    }
    .selectedVue {
        width: 100%;
        height: 70px;
        border: 1px solid #DCDFE6;
        margin-top: 10px;
        border-radius: 4px;
        padding: 5px;
        overflow: scroll;
    }
    .selectedVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .paginationVue {
        width: 100%;
        height: 60px;
    }
    .cancel, .create {
        width: 80px;
        height: 36px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        text-align: center;
        line-height: 36px;
    }
    .cancel {
        background: transparent;
        border: 1px solid #DCDFE6;
        color: #999;
        line-height: 36px;
    }
    .create {
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
    }
}
</style>